<template>
  <div>
    <el-date-picker
      v-model="date"
      type="date"
      @change="send()"
      placeholder="选择日期">
    </el-date-picker>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="chartLine" class="line-wrap"></div>
    <div class="left-content2">
      <div id="chartPie" class="pie-wrap"></div>
    </div>
    <div class="right-content2">
      <div id="chartBar" class="helianthus-wrap">
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import moment from "moment";
import {plan, read, share} from "@/api/communityActivity";
require('echarts/theme/shine');//引入主题
require('echarts/theme/helianthus')

export default {
  data() {
    return {
      chartLine: null,
      date: null,
      chartPie: null,
      chartBar: null,
      pieData:[],
      barDataX: [],
      barDataY: [],
      lineData: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.send()
    })
  },
  methods: {
    send(){
      if (this.date != null)
        this.date = moment(this.date).format('YYYY-MM-DD')
      plan(this.date).then(res => {
        this.pieData = res.body.data
        this.drawPieChart();
      })
      read(this.date).then(res => {
        for (let i=0;i<res.body.data.length;i++) {
          this.barDataX.push(res.body.data[i].name)
          this.barDataY.push(res.body.data[i].value)
          this.drawBar();
        }
      })
      share(this.date).then(res => {
        this.lineData = res.body.data
        this.drawLineChart();
      })
    },
    drawLineChart() {
      this.chartLine = echarts.init(document.getElementById('chartLine'),'shine');
      let option = {
        tooltip : {
          trigger: 'axis',
          formatter: function(a) {
            let list = []
            let listItem = ''
            for (var i = 0; i < a.length; i++) {
              list.push(
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                a[i].color +
                ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;color: red">' +
                a[i].seriesName +
                '&nbsp&nbsp数量：' +
                a[i].data + '</span>'
              )
            }
            listItem = list.join('<br>')
            return '<div class="showBox">' + listItem + '</div>'
          }
        },
        legend: {
          data:['发布','评论','点赞','收藏']
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            axisTick: {
              show: false
            },
            data : this.lineData[0]
          }
        ],
        yAxis : [
          {
            type : 'value',
            axisTick: {
              show: false
            },
            name: ''
          }
        ],
        series : [
          {
            name:'发布',
            type:'line',
            data:this.lineData[1]
          },
          {
            name:'评论',
            type:'line',
            data:this.lineData[2]
          },
          {
            name:'点赞',
            type:'line',
            data:this.lineData[3]
          },
          {
            name:'收藏',
            type:'line',
            data:this.lineData[4]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表
      this.chartLine.setOption(option);
    },
    drawPieChart() {
      let mytextStyle = {
        color: "#333",
        fontSize: 18,
      };
      let mylabel = {
        show: true,
        position: "left",
        offset: [30, 40],
        formatter: '{b} : {c} ({d}%)',
        textStyle: mytextStyle
      };
      this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
      this.chartPie.setOption({
        title: {
          text: '计划统计饼图',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: ['参与', '已结束', '已取消', '进行中'],
          left:"center",
          top:"bottom",
          orient:"horizontal",
        },
        series: [
          {
            name: '计划状态',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: this.pieData,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label: {
              emphasis: mylabel
            }
          }
        ]
      });
    },
    drawBar() {
      //基于准备好的dom，初始化echarts实例
      this.chartBar = echarts.init(document.getElementById('chartBar'),'helianthus');
      //绘制图表
      let option = {
        title: {text: '朗读发布量'},
        tooltip: {},
        legend: {
          data: ['发布数']
        },
        xAxis: {
          data: this.barDataX
        },
        yAxis: {},
        series: [{
          name: '发布数',
          type: 'bar',
          data: this.barDataY
        }]
      }
      this.chartBar.setOption(option)
    }
  }
}
</script>

<style scope>
.line-wrap{
  width:100%;
  height:300px;
}
.pie-wrap{
  width:100%;
  height:400px;
}
.helianthus-wrap {
  width:100%;
  height:400px;
}
.app-container{
  height: 100%;
}
/*left*/
.left-content2{
  height: 100%;
  width: 450px;
  float: left;
}
.left-content .left-content-title{
  width: 300px;
  display: block;
}
.left-content .left-content-text{
  width: 750px;
  position: relative;
  padding-top: 50px;
}
.left-content .left-content-text .button{
  position: absolute;
  top: 470px;
  left: 470px;
}
.left-content .left-content-text .x-button{
  position: absolute;
  top: 470px;
  left: 370px;
}
/*right*/
.right-content2{
  width: 550px;
  float: left;
  height: 100%;
  padding-left: 100px;
}
</style>
